<template>
  <el-dialog
    class="upload-model"
    :title="title"
    :close-on-click-modal="false"
    :destroy-on-close="true"
    :visible="visible"
    :width="$setRem(500)"
    :before-close="handleCancel">
    <div class="content">
      <div class="file-container">
        <el-row>
          <el-col class="title" :span="8">
            {{hasBimface ? '模型' : '方案'}}名称
          </el-col>
          <el-col :span="14">
            <el-input v-model="fileName" :placeholder="`请输入${hasBimface ? '模型' : '方案'}名称`"></el-input>
          </el-col>
        </el-row>

        <el-row v-show="!hasFile">
          <el-col class="title" :span="8"></el-col>
          <el-col :span="12">
            <el-upload
              class="upload-container"
              action="custom"
              :accept="accept"
              :on-change="handleChange"
              :show-file-list="false"
              :limit="1">
              <el-button size="small" type="primary">点击上传</el-button>
              <div v-if="tip" slot="tip" class="el-upload__tip">{{ tip }}</div>
            </el-upload>
          </el-col>
        </el-row>

        <span v-show="hasFile">
          <template v-if="hasLinkUpload">
            <el-row>
              <el-col class="title" :span="8">模型链接</el-col>
              <el-col :span="14">
                <div>
                  <el-input v-model="fileUrl" placeholder="请输入模型链接"></el-input>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col class="title" :span="8">是否外链</el-col>
              <el-col :span="14">
                <el-radio-group class="linkage" v-model="isUrl">
                  <el-radio label="1">是</el-radio>
                  <el-radio label="0">否</el-radio>
                </el-radio-group>
              </el-col>
            </el-row>
          </template>

          <el-row v-else>
            <el-col class="title" :span="8">
              {{hasBimface ? '模型' : '方案'}}附件
            </el-col>
            <el-col class="file-list" :span="16">
              <div>
                <i class="el-icon-document"></i>
                <span class="file-name" :title="fileName">
                {{ fileName }}{{ fileType }}
              </span>
                <i class="el-icon-close" @click="handleRemove"></i>
              </div>
            </el-col>
          </el-row>

          <template v-if="hasShowLinkage">
            <el-row>
              <el-col class="title" :span="8">支持图模联动</el-col>
              <el-col :span="14">
                <el-radio-group class="linkage" v-model="hasLinkage">
                  <el-radio label="1">是</el-radio>
                  <el-radio label="0">否</el-radio>
                </el-radio-group>
              </el-col>
            </el-row>
            <el-row v-show="hasLinkage === '1'">
              <el-col class="title" :span="8">图纸ID</el-col>
              <el-col :span="14">
                <el-input v-model="drawId" placeholder="请输入联动图纸ID"></el-input>
              </el-col>
            </el-row>
          </template>
        </span>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleCancel">取 消</el-button>
      <el-button
        class="success"
        type="primary"
        :loading="loading"
        @click="handleSubmit">
        确 定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '文件上传'
    },
    // 是否上传bimface模型文件
    hasBimface: {
      type: Boolean,
      default: false
    },
    // 是否为链接上传
    hasLinkUpload: {
      type: Boolean,
      default: false
    },
    visible: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    tip: {
      type: String,
      default: ''
    },
    // 上传类型限制
    accept: {
      type: String,
      default: '.xlsx,.xls,.cvs'
    }
  },
  data() {
    return {
      fileName: '',
      files: {},
      fileUrl: '',
      drawId: '',
      // 是否为外部链接
      isUrl: '1',
      // 是否支持图模联动
      hasLinkage: '0'
    };
  },
  computed: {
    // 是否展示联动项
    hasShowLinkage() {
      return this.hasBimface && !this.hasLinkUpload;
    },
    // 文件后缀
    fileType() {
      const list = this.files.name && this.files.name.match(/\..*$/);
      return list ? list[0] : '';
    },
    // 是否有文件信息
    hasFile() {
      return !!Object.keys(this.files).length || this.hasLinkUpload;
    }
  },
  watch: {
    visible(value) {
      if (!value) {
        this.files = {};
        this.fileName = '';
        this.fileUrl = '';
        this.hasLinkage = '0';
        this.isUrl = '1';
        this.drawId = '';
      }
    }
  },
  methods: {
    // 上传文件
    handleChange(file, fileList) {
      this.files = file.raw;
      this.fileName = file.name.replace(/\..*$/, '');
      return false;
    },
    /**
     * 删除文件
     */
    handleRemove() {
      this.files = {};
      this.fileName = '';
    },
    // 提交
    async handleSubmit() {
      if (!this.hasFile) return;
      if (!this.fileName || /^\s+$/g.test(this.fileName)) {
        return this.$message.warning('请输入正确的名称');
      }
      if (this.hasLinkUpload && !/^http(s?)/.test(this.fileUrl)) {
        return this.$message.warning('请输入正确的上传链接');
      }
      if (this.hasLinkage === '1' && !this.drawId) {
        return this.$message.warning('请输入图纸ID');
      }
      const newFile = new window.File([this.files], this.fileName + this.fileType, {
        type: this.files.type
      });
      const params = {
        fileName: this.fileName,
        fileUrl: this.fileUrl,
        file: newFile,
        fileType: this.hasLinkage,
        drawId: this.drawId,
        isUrl: this.isUrl
      };
      this.$emit('submit', params);
    },
    // 取消
    handleCancel() {
      this.$emit('cancel', false);
    }
  }
};
</script>

<style scoped lang="scss">
  @import '../../../assets/styles/dialog';

  .upload-model {
    .file-container {
      margin-top: 20px;
      .el-col {
        height: 40px;
        margin-bottom: 15px;
        &.title {
          padding: 0 10px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-weight: bold;
          /*text-align: right;*/
        }
        &.file-list {
          height: 40px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          > div {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            cursor: pointer;
            background-color: $baseBg;
            padding: 5px;
            transition: background-color .2s;
            &:hover {
              background-color: rgba(186, 196, 255, .5);
            }
          }
          .file-name {
            display: inline-block;
            max-width: 240px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin: 0 10px;
          }
        }
        .linkage {
          height: 100%;
          display: flex;
          align-items: center;
          /deep/ .el-radio__label {
            color: #fff;
          }
        }
      }
    }
  }
</style>
